<template>
  <div class="query">
    <div class="check">
      <div class="c_left">条件搜索栏</div>
      <div class="c_right">
        <div class="clear">
          <div class="fl">
            <span class="c_tip">科室</span>
            <el-select
              v-model="queryInfo.Deptcode"
              filterable
              clearable
              placeholder="请选择"
              class="c_select"
              @change="deptChange"
            >
              <el-option
                v-for="item in deptList"
                :key="item.DeptCode"
                :label="item.DeptName"
                :value="item.DeptCode"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">病区</span>
            <el-select
              v-model="queryInfo.Wardcode"
              class="c_select"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in wardCode"
                :key="item.wardCode"
                :label="item.WardName"
                :value="item.wardCode"
              />
            </el-select>
          </div>
          <div class="fl">
            <span class="c_tip">床位</span>
            <el-input
              v-model="queryInfo.Bedno"
              placeholder="请输入床位"
            />
          </div>
          <div class="fl">
            <span class="c_tip">患者姓名</span>
            <el-input
              v-model="queryInfo.Patient_name"
              placeholder="请输入患者姓名"
            />
          </div>
        </div>
        <div class="fl">
          <span class="c_tip">住院号</span>
          <el-input
            v-model="queryInfo.Inp_no"
            placeholder="请输入住院号"
            style="margin-left: 1px"
          />
        </div>
        <div class="fl">
          <span class="c_tip" />
          <el-button
            type="primary"
            class="btn_clear"
            @click="getRoundPageListJson"
          >查询</el-button>
        </div>
      </div>
    </div>
    <div class="list_tip clear" />
    <div v-if="patientInfoList.patientInfo.length !== 0 ">
      <div
        class="infogroups"
        style="width:100%; height:485px"
      >
        <el-scrollbar style="height:100%">
          <div class="table_box">
            <template v-for="(item) in patientInfoList.patientInfo">
              <div
                :key="item.patient_id"
                class="infoCard"
              >
                <el-card shadow="hover">
                  <div class="card-title">
                    <div
                      class="header-bedid"
                      @click="patientInfoShowDialog(item.patient_id)"
                    >
                      <el-tooltip
                        class="item"
                        :enterable="false"
                        effect="dark"
                        content="查看详情"
                        placement="bottom-end"
                      >
                        <a>{{ item.bedno }}床</a>
                      </el-tooltip>
                    </div>
                    <div
                      class="header-content"
                      @click="focusDialog(item.patient_id)"
                    >
                      <el-tooltip
                        class="item"
                        :enterable="false"
                        effect="dark"
                        content="修改关注级别"
                        placement="bottom-end"
                      >
                        <a>{{ item.attentionlev }}</a>
                      </el-tooltip>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="info-item">
                      <div class="info-label">住院号:</div>
                      <div class="info-message">
                        <div class="info-adnumber">{{ item.inp_no }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">{{ item.patient_name }}</div>
                      <div class="info-message info-more">
                        <div class="info-age">{{ item.age }}</div>
                        <div class="info-sex">{{ item.sex }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">护理状态</div>
                      <div class="info-message">
                        <div class="info-status"><span>{{ item.nursinglev }}</span></div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">入院时间:</div>
                      <div class="info-message">
                        <div class="info-rydate">{{ item.startdate }}</div>
                      </div>
                    </div>
                    <div class="info-item">
                      <div class="info-label">诊断信息:</div>
                      <div class="info-message">
                        <div class="info-zd">{{ item.disname }}</div>
                      </div>
                    </div>
                  </div>
                </el-card>
              </div>
            </template>
          </div>
        </el-scrollbar>
      </div>
      <pagination
        :total="querypatientListPage.total"
        :page.sync="querypatientListPage.pagenum"
        :limit.sync="querypatientListPage.pagesize"
        @pagination="getList"
      />
    </div>
    <div v-else>
      <div class="no-data">无筛选数据</div>
    </div>
    <!--  病人信息弹窗-->
    <el-dialog
      :title="patientInfoShowTitle"
      width="1150px"
      :visible.sync="patientInfoShow"
      @close="patientInfoCloseDialog"
    >
      <el-tabs
        v-model="activeName"
        type="card"
      >
        <el-tab-pane
          label="病人基本信息"
          name="first"
        >
          <card>
            <div slot="cardHeader">病人基本信息</div>
            <div slot="cardBody">
              <template v-for="(item) in patientInfoDetail.PatientInfo">
                <div
                  :key="item.PatientId"
                  class="patientInfo"
                >
                  <div class="infoline">
                    <div class="fl">
                      <div class="c_tip">病人姓名:</div>
                      <div class="c_text">{{ item.PatientName }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">住院号:</div>
                      <div class="c_text">{{ item.InpNo }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">性别:</div>
                      <div class="c_text">{{ item.Sex }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">出生日期:</div>
                      <div class="c_text">{{ item.BirthDate }}</div>
                    </div>
                  </div>
                  <div class="infoline">
                    <div class="fl">
                      <div class="c_tip">年龄:</div>
                      <div class="c_text">{{ item.Age }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">身高(cm):</div>
                      <div class="c_text">{{ item.Height }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">体重(kg):</div>
                      <div class="c_text">{{ item.Weight }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">联系电话:</div>
                      <div class="c_text">{{ item.TelePhone }}</div>
                    </div>
                  </div>
                  <div class="infoline">
                    <div class="fl">
                      <div class="c_tip">身份证号:</div>
                      <div class="c_text">{{ item.IdCard }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">就诊科室:</div>
                      <div class="c_text">{{ item.WardName }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">就诊时间:</div>
                      <div class="c_text">{{ item.StartDate }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">就诊医师:</div>
                      <div class="c_text">{{ item.DoctorName }}</div>
                    </div>
                  </div>
                  <div class="infoline">
                    <div class="fl">
                      <div class="c_tip">过敏药物:</div>
                      <div class="c_text">{{ item.Allername }}</div>
                    </div>
                    <div class="fl">
                      <div class="c_tip">诊断:</div>
                      <div class="c_text">{{ item.Disname }}</div>
                    </div>
                    <div class="fl" />
                    <div class="fl" />
                  </div>
                </div>
              </template>
            </div>
          </card>
          <card>
            <div slot="cardHeader">详细诊断</div>
            <div slot="cardBody">
              <!--              <Bluetable :t-head="tHead" :t-data="tableData" />-->
            </div>
          </card>
          <card>
            <div slot="cardHeader">工作记录</div>
            <div slot="cardBody">
              <el-tag>医嘱审核</el-tag>
              <el-tag type="success">电子药历</el-tag>
              <el-tag type="info">查房记录</el-tag>
              <el-tag type="warning">药学评估</el-tag>
              <el-tag type="danger">药学监护</el-tag>
            </div>
          </card>
          <card>
            <div slot="cardHeader">生命体征</div>
            <div slot="cardBody">
              <div
                id="myChart"
                :style="{width: '100%', height: '300px'}"
              />
            </div>
          </card>
        </el-tab-pane>
        <el-tab-pane
          label="病人医嘱信息"
          name="second"
        >
          <div>
            <Bluetable
              :t-head="ordersdataHead"
              :t-data="patientInfoDetail.OrdersData"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="病人检验信息"
          name="third"
        >
          <div class="labInfo">
            <div class="labInfoTop">
              <Bluetable
                :t-head="LabInfoDataHead"
                :t-data="patientInfoDetail.LabInfoData"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="病人检查信息"
          name="fourth"
        >
          <div>
            <Bluetable
              :t-head="ExamInfoDataHead"
              :t-data="patientInfoDetail.ExamInfoData"
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="电子病历"
          name="fifth"
        >无电子病历</el-tab-pane>
      </el-tabs>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="patientInfoCloseDialog"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!--    关注信息-->
    <el-dialog
      title="关注"
      :visible.sync="focusDialogShow"
    >
      <el-form :model="focusForm">
        <el-form-item label="关注类型">
          <el-radio-group v-model="focusForm.AttentionLev">
            <el-radio :label="'1'">其他</el-radio>
            <el-radio :label="'2'">药品</el-radio>
            <el-radio :label="'3'">不良反应</el-radio>
            <el-radio :label="'4'">肝功能</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="关注原因">
          <el-input
            v-model="focusForm.AttentionTxt"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="closefocusDialogShow">取 消</el-button>
        <el-button
          type="primary"
          @click="saveAttentionDetail(focusForm.PatientId)"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import Card from '../../prc/childComps/card/Card'

import { GetRoundPageListJson,
  GetDeptListJson,
  AttentionLevDetail,
  SaveAttentionDetail,
  PatientInfoDetail
} from '@/api/cpw'
// 按需引入 引入 ECharts 主模块
// eslint-disable-next-line no-unused-vars
var echarts = require('echarts/lib/echarts')
// 引入柱状图
require('echarts/lib/chart/line')
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  components: {
    Card
  },
  data() {
    return {
      // 科室列表
      deptList: [],
      // 病区列表
      wardCode: [],
      // 查房病人列表返回数据
      patientInfoList: {
        // 总页数
        total: '',
        // 当前页
        page: '',
        // 总条数
        records: '',
        // 	病人信息列表
        patientInfo: []
      },
      // 病人详细
      patientInfoDetail: {
        PatientInfo: [],
        OrdersData: [],
        DiseaseInfo: [],
        ExamInfoData: [],
        LabInfoData: [],
        temperature: []
      },
      // 查询参数
      queryInfo: {
        Deptcode: '',
        Wardcode: '',
        Bedno: '',
        Patient_name: '',
        Inp_no: ''
      },
      // 查询病人列表分页参数
      querypatientListPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      // 医嘱信息分页参数 暂定
      ordersDataPage: {
        // 第n页
        pagenum: 1,
        // 每页多少条
        pagesize: 10,
        // 总条数
        total: 0
      },
      focusForm: {
        AttentionLev: '',
        AttentionTxt: '',
        PatientId: ''
      },
      // 病人详细信息弹窗
      patientInfoShow: false,
      focusDialogShow: false,
      // 病人详细信息弹窗标题
      patientInfoShowTitle: '',
      // 激活的卡片
      activeName: 'first',
      // 医嘱信息表格头部
      ordersdataHead: [
        {
          prop: 'GroupTagColor',
          label: '组',
          width: '50px'
        }, {
          prop: 'Ordercategory',
          label: '医嘱类型'
        }, {
          prop: 'OrderName',
          label: '医嘱名称',
          width: '200px'
        }, {
          prop: 'DrugForm',
          label: '剂型'
        }, {
          prop: 'DrugSpec',
          label: '规格'
        }, {
          prop: 'RouteName',
          label: '给药途径'
        }, {
          prop: 'SingleDose',
          label: '量/次'
        }, {
          prop: 'DoseUnit',
          label: '给药单位'
        }, {
          prop: 'Freq',
          label: '次/日'
        }, {
          prop: 'Cost',
          label: '费用'
        }, {
          prop: 'DoctorName',
          label: '开嘱医生'
        }, {
          prop: 'date',
          label: '开嘱时间'
        }, {
          prop: 'PurPose',
          label: '用药目的'
        }, {
          prop: 'date',
          label: '调配药师'
        }, {
          prop: 'date',
          label: '发药药师'
        }, {
          prop: 'date',
          label: '补充用法'
        }
      ],
      // 病人检验信息表头
      LabInfoDataHead: [
        {
          prop: 'labname',
          label: '检验类型'
        },
        {
          prop: '',
          label: '送检科室'
        },
        {
          prop: 'reporttime',
          label: '检查日期'
        }, {
          prop: '',
          label: '报告日期'
        }, {
          prop: '',
          label: '检查部位和名称'
        }, {
          prop: '',
          label: '检查方法'
        }, {
          prop: '',
          label: '放射学表现'
        }, {
          prop: '',
          label: '放射学诊断'
        }, {
          prop: 'doctorname',
          label: '书写医生'
        }
      ],
      // 病人检验头部
      ExamInfoDataHead: [
        {
          prop: 'examname',
          label: '检验类型'
        },
        {
          prop: '',
          label: '送检科室'
        },
        {
          prop: 'reporttime',
          label: '检查日期'
        }, {
          prop: '',
          label: '报告日期'
        }, {
          prop: 'bodypart',
          label: '检查部位和名称'
        }, {
          prop: '',
          label: '描述'
        }, {
          prop: '',
          label: '表现'
        }, {
          prop: '',
          label: '结果'
        }, {
          prop: 'doctorname',
          label: '书写医生'
        }
      ]
    }
  },
  created() {
    this.getDeptListJson()
  },
  methods: {
    // 获取科室列表list
    async getDeptListJson() {
      await GetDeptListJson({
        keyword: ''
      }).then(res => {
        this.deptList = res
      }).catch(err => {
        console.log(err)
      })
    },
    // 科室列表改变
    deptChange() {
      this.querypatientListPage.pagenum = 1
      this.querypatientListPage.pagesize = 10
      this.querypatientListPage.total = 0
    },
    // 获取查房病人列表
    async getRoundPageListJson() {
      var tempObject = JSON.parse(JSON.stringify(this.queryInfo))
      for (var key in tempObject) {
        if (tempObject[key] === '') {
          delete tempObject[key]
        }
      }
      await GetRoundPageListJson({
        json: tempObject,
        // 第n页
        pagenum: this.querypatientListPage.pagenum,
        // 每页多少条
        pagesize: this.querypatientListPage.pagesize
      }).then(res => {
        this.patientInfoList.total = res.total
        this.patientInfoList.page = res.page
        this.patientInfoList.records = res.records
        this.querypatientListPage.total = res.records
        this.patientInfoList.patientInfo = res.rows
        console.log(this.patientInfoList.patientInfo)
      }).catch(err => {
        console.log(err)
      })
    },
    // 获取病人详细信息
    async getPatientInfoDetail(patientId) {
      await PatientInfoDetail({
        patient_id: patientId
      }).then(res => {
        this.patientInfoDetail.PatientInfo = res.PatientInfo
        this.patientInfoDetail.OrdersData = res.OrdersData
        this.patientInfoDetail.OrdersData = res.OrdersData
        this.patientInfoDetail.ExamInfoData = res.ExamInfoData
        this.patientInfoDetail.LabInfoData = res.LabInfoData
        this.patientInfoDetail.temperature = res.temperature
      }).catch(err => {
        console.log(err)
      })
    },
    // 显示病人信息弹窗
    patientInfoShowDialog(patientId) {
      this.getPatientInfoDetail(patientId)
      this.patientInfoShowTitle = '病人详细信息[' + this.patientInfoDetail.PatientInfo[0].PatientName + ']'
      this.$nextTick(() => {
        //  执行echarts方法
        this.initCharts()
      })
      this.patientInfoShow = true
    },
    focusDialog(id) {
      console.log(id)
      this.focusDialogShow = true
      this.attentionLevDetail(id)
    },
    // 关闭病人信息 弹窗
    patientInfoCloseDialog() {
      this.patientInfoShow = false
      this.patientInfoShowTitle = ''
      this.patientInfoDetail = {
        PatientInfo: [],
        OrdersData: [],
        DiseaseInfo: [],
        ExamInfoData: [],
        LabInfoData: [],
        temperature: []
      }
      this.activeName = 'first'
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById('myChart'))
      this.setOptions(this.patientInfoDetail.temperature)
    },
    setOptions(value) {
      this.chart.setOption({
        xAxis: {
          type: 'category',
          data: value.map(item => item.time)
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['体温']
        },
        series: [{
          name: '体温',
          data: value.map(item => item.temperature),
          type: 'line',
          smooth: true,
          itemStyle: { normal: { label: { show: true }}}
        }]
      })
    },
    // 病人列表分页数据改变
    async getList(type) {
      this.querypatientListPage.pagenum = type.page
      this.querypatientListPage.pagesize = type.limit
      await this.getRoundPageListJson()
    },
    async attentionLevDetail(id) {
      await AttentionLevDetail({
        keyValue: id
      }).then(res => {
        console.log(res)
        this.focusForm.PatientId = res.PatientId
        this.focusForm.AttentionLev = res.AttentionLev
        this.focusForm.AttentionTxt = res.AttentionTxt
      }).catch(err => {
        console.log(err)
      })
    },
    closefocusDialogShow() {
      this.focusDialogShow = false
      this.focusForm = {
        AttentionLev: '',
        AttentionTxt: '',
        PatientId: ''
      }
    },
    async saveAttentionDetail(id) {
      await SaveAttentionDetail({
        id: this.focusForm.PatientId,
        txtinfo: this.focusForm.AttentionTxt,
        type: this.focusForm.AttentionLev
      }).then(res => {
        if (res === '保存成功') {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.closefocusDialogShow()
        } else {
          this.$message({
            message: '保存失败',
            type: 'warning'
          })
          this.closefocusDialogShow()
        }
      }).catch(err => {
        console.log(err)
      })
    }

  }
}
</script>

<style lang="scss" scoped="scoped">
body {
  background: #e6edf5;
}
.patientInfo {
  .infoline {
    display: flex;
    justify-content: space-around;
    .fl {
      display: flex;
      padding-bottom: 5px;
      width: 210px;
      .c_tip {
        width: 60px;
        text-align: right;
      }
      .c_text {
        width: 140px;
        padding-left: 4px;
      }
    }
  }
}
.query {
  width: 100%;
  height: 100%;
  background: #e6edf5;
  .check {
    font-size: 12px;
    line-height: 40px;
    background: #fff;
    text-align: center;
    .c_left {
      width: 115px;
      float: left;
      line-height: 65px;
    }
    .c_right {
      overflow: hidden;
      color: #636365;
      border-left: 1px solid #e6edf5;
      padding: 15px 0;
      position: relative;
      .show_btn {
        position: absolute;
        right: 20px;
        bottom: 15px;
        border: 1px solid #e1e1e1;
        background: #f9fafc;
        border-radius: 2px;
        text-align: center;
        line-height: 32px;
        width: 104px;
        height: 32px;
        font-size: 14px;
        color: #9f9f9f;
        cursor: pointer;
      }
      .fl {
        margin-bottom: 10px;
      }
      .c_tip {
        display: inline-block;
        width: 80px;
        padding-right: 10px;
        text-align: right;
      }
      .c_input {
        width: 131px;
        height: 40px;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding-left: 5px;
      }
      .c_input::-webkit-input-placeholder {
        color: #dcdfe6;
      }
      .c_input::-ms-input-placeholder {
        color: #dcdfe6;
      }
      .c_input::-moz-input-placeholder {
        color: #dcdfe6;
      }
      .c_search {
        width: 90px;
      }
      .c_searchbtn {
        display: inline-block;
        width: 34px;
        height: 25px;
        margin-left: 3px;
        background: #28a4f4;
        color: #fff;
        font-size: 12px;
        text-align: center;
        line-height: 26px;
        border-radius: 6px;
        cursor: pointer;
      }
      .c_checkbox {
        width: 230px;
        height: 40px;
        display: inline-block;
        margin-left: -12px;
      }
      .btn_clear {
        padding: 0;
        width: 60px;
        height: 40px;
        line-height: 40px;
      }
      .sbtn_box {
        text-align: left;
        padding-left: 82px;
      }
      .c_select {
        width: 130px;
      }
      @media screen and (min-width: 1466px) {
        .c_select {
          width: 150px;
        }
        .btn_clear {
          padding: 0;
          width: 70px;
          height: 40px;
          line-height: 40px;
        }
        .c_input {
          width: 150px;
        }
        .c_search {
          width: 100px;
        }
        .c_searchbtn {
          width: 42px;
          margin-left: 4px;
        }
        .c_tip {
          width: 100px;
        }
      }
    }
  }
  .list_tip {
    font-size: 14px;
    color: #29a4f2;
    padding: 10px 18px;
  }

  .infogroups {
    width: 100%;
    height: 100%;
  }
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .table_box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 18px;
    .infoCard {
      width: 220px;
      padding-bottom: 20px;
    }
  }
}
.el-checkbox__label {
  padding-left: 5px;
}
.el-checkbox {
  margin-right: 10px;
}
/deep/.el-card__body {
  padding: 0;
}
/deep/.el-input {
  width: 150px;
  height: 40px;
  border-radius: 4px;
  padding-left: 5px;
  font-size: 12px;
}
.el-card {
  border: 0;
}
.no-data {
  font-size: 25px;
  margin-left: 115px;
}
.infoCard {
  width: 20%;
  min-width: 20%;
  max-width: 20%;
  padding: 10px 10px;
}
.card-title {
  color: #ffffff;
  background-color: #28a4f4;
  height: 75px;
  text-align: center;
  .header-bedid {
    font-size: 20px;
    padding: 10px;
  }
  .header-bedid:hover {
    span {
      border-bottom: 1px solid #fff;
    }
  }
  .header-content:hover {
    span {
      border-bottom: 1px solid #fff;
    }
  }
}
.card-body {
  font-size: 12px;
  padding: 10px;
  height: 180px;
  .info-item {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 5px;
    .info-label {
      flex: 1;
      text-align: right;
    }
    .info-message {
      flex: 1;
      margin-left: 5px;
      .info-status {
        color: #ffffff;
        span {
          padding: 1px 3px;
          border-radius: 3px;
          background-color: #5cb85c;
        }
      }
    }
    .info-more {
      display: flex;
      .info-sex {
        padding-left: 5px;
      }
    }
  }
}
</style>
